<template>
  <!-- <el-scrollbar height="100vh"> -->
  <div id="content">
    <div class="img">
      <ImgBanner />
    </div>
    <el-container class="main">
      <div class="main-left" v-if="!isMobile"> <!-- 如果是移动端，则阉割掉导航功能 -->
        <el-affix :offset="40">
          <transition type="animation" class="animate__animated animate__faster"
            enter-active-class="animate__fadeInBottomLeft" leave-active-class="animate__fadeOutLeft" mode="out-in">
            <component :is='reading?IndexCard:NavigateCard'> <!-- 若正在阅读，则挂载IndexCard -->
            </component>
          </transition>
        </el-affix>
      </div>
      <el-container class="main-right">
        <el-main>
          <router-view v-slot="{ Component }">
            <transition type="animation" class="animate__animated animate__faster"
              enter-active-class="animate__fadeInRight" leave-active-class="animate__fadeOutRightBig" mode="out-in">
              <component class="view" :is="Component" />
            </transition>
          </router-view>
        </el-main>
        <el-footer>
          豫ICP备2024056581号
        </el-footer>
      </el-container>
    </el-container>

    <div v-if="isMobile" class="drawer" :class="{ 'drawer-active': drawer }">
      <div class="drawer-pointer" :class="{ 'drawer-pointer-active': drawer }" @click="openDrawer">
        &nbsp;{{ drawer?'>':'<' }} </div>
          <component :is='reading?IndexCard:NavigateCard'> <!-- 若正在阅读，则挂载IndexCard -->
          </component>
      </div>
    </div>
    <!-- </el-scrollbar> -->
</template>
<script setup lang="ts">
import ImgBanner from './components/ImgBanner/ImgBanner.vue'
import NavigateCard from './components/NavigateCard/NavigateCard.vue'
import IndexCard from './components/IndexCard/IndexCard.vue';
import emitter from './utils/emitter';

import { ref, onMounted, onUnmounted } from 'vue'

//抽屉，竖屏设备加载后启动
let isMobile = ref<boolean>()
isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
let width = ref(isMobile.value ? '100%' : '80%')

let drawer = ref<boolean>(false) //是否开启抽屉
const openDrawer = () => {
  drawer.value = !drawer.value
}


//是否打开文章，若打开则切换左侧状态
let reading = ref<boolean>(false)
onMounted(() => {
  emitter.on('readArticle', (action: any) => {

    if ((typeof action) === 'boolean') {
      reading.value = action
    }
  })

  emitter.on('closeNav',()=>{ //若是竖屏设备，且用户点击了路由导航，则就需要关闭路由
    if(isMobile.value == true){
      openDrawer()
    }
  })
})
onUnmounted(() => {
  emitter.off('readArticle')
  emitter.off('closeNav')
})

//获取滚动
import { useScrollStore } from './store/scrollStore';
const scrollStore = useScrollStore()
const handleScroll = () => {
  scrollStore.scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.screenTop //获取被卷去的距离，这是一个兼容的写法
}
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0px 20px 10px 10px;
  overflow: hidden;
}

#content {
  width: 100%;
  font-family: '苍耳';
  position: relative
    /* display: flex;
  flex-direction: column; */
}

.main {
  width: v-bind(width);
  max-width: 1500px;
  margin: 20px auto;

  &-right {
    flex-grow: 1;
  }

  &-left {
    margin-right: 10px;
    min-width: 200px;
  }
}

.el-footer {
  padding: 1rem;
  color: $theme-color-info;
}

.drawer {
  transition: 0.3s;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0px;
  right: -252px;
  width: 280px;

  &-pointer {
    line-height: 40px;
    background-color: $theme-color;
    color: white;
    height: 40px;
    width: 30px;
    border-radius: 50% 0 0 50%;
    margin-top: 50px;
    padding-left: 10px;
  }
}

.drawer-active{
  right: 0px;
}
</style>
